<template>
	<view class="auto-page">
		<view class="f-1 bg-white" style="padding-bottom: 100rpx;" v-if="isReady">
			<!-- 商品名称 -->
			<view class="goods-name f-row p-lr-30">
				<view class="title t-80-26">商品名称</view>
				<input class="txt" type="text" v-model="goodsnameValue" placeholder="请输入商品名称"></input>
			</view>
			<!-- 平台商品分类 -->
			<view class="platform-goods-category f-row p-lr-30">
				<view class="title">平台商品分类</view>
				<view style="position: relative;flex: 1;" @click.stop="categoryListselect" v-if="categoryList">
					<view :style="categorychooseValue[2] == -1 ? 'height: 100rpx;line-height: 100rpx;font-size: 24rpx;text-align: right;padding-right: 75rpx;color: #999999'
																: 'height: 100rpx;line-height: 100rpx;font-size: 24rpx;text-align: right;padding-right: 75rpx;'">
						{{categorychooseValue[0] !== -1 && categorychooseValue[1] !== -1 && categorychooseValue[2] !== -1 ? 
						categoryList[categorychooseValue[0]].label + '/' + categoryList[categorychooseValue[0]].children[categorychooseValue[1]].label + '/' + categoryList[categorychooseValue[0]].children[categorychooseValue[1]].children[categorychooseValue[2]].label : '请选择' }}
					</view>
					<view :class="categoryListClass"></view>
				</view>
			</view>
			<!-- 商户商品分类 -->
			<view class="mer-goods-category f-row p-lr-30" @click.stop="categorySelectselect">
				<view class="title">商户商品分类</view>
				<view style="height: 100%;width: 420rpx;overflow: scroll;" v-if="cSelectchooseValue.length > 0">
					<view class="f-row category-select">
						<view class="category-select-item" v-for="(item, index) in cSelectchooseList" :key="index" @click.stop>
							{{item.cate_name}}
							<image class="delete-icon" mode="aspectFill" src="../../static/icons/delete.png" @click.stop="deleteCategorySelect(item)"></image>
						</view>
					</view>
				</view>
				<view class="f-row category-select" v-else>
					<view style="width:100%;height: 100rpx;line-height: 100rpx;padding:0 15rpx;font-size: 24rpx;color: #999999;text-align: right;"
					 @click.stop="categorySelectselect">请选择</view>
				</view>
				<view :class="categorySelectClass" style="right: 60rpx;"></view>
			</view>
			<!-- 品牌 -->
			<view class="goods-brand f-row p-lr-30">
				<view class="title">品牌选择</view>
				<view class="goods-brand-select" :style="brandchooseValue ? 'color:#333333' : 'color:#999999'" @click.stop="brandSelect">
					{{brandchooseValue.brand_name || '请选择'}}
					<view :class="brandClass"></view>
				</view>
			</view>
			<!-- 商品简介 -->
			<view class="goods-produce f-column p-lr-30">
				<view class="title">商品简介</view>
				<view class="textarea">
					<textarea :value="textareaValue" placeholder="请输入商品简介" @input="(e) => (this.textareaValue = e.detail.value)"/>
					</view>
			</view>
			<!-- 商品封面图 -->
			<view class="goods-mainpic f-column p-lr-30">
				<view class="title">商品封面图</view>
				<view class="pic-container">
					<view class="pic-container-pic-container add-picture" v-if="image == ''">
						<image class="addpicture-icon" mode="aspectFill" src="../../static/icons/add.png" @click="addPic(2,1,'main_image')"></image>
					</view>
					<view style="position: relative;height: 27vw;width: 27vw;margin-bottom: 15rpx;overflow: hidden;" v-else>
						<image class="delete-pic-icon" mode="aspectFill" src="../../static/icons/delete.png" @click.stop="deletePic('image')"></image>
						<image class="pic-container-pic" mode="aspectFill" :src="image"></image>
					</view>
				</view>
			</view>
			<!-- 商品轮播图 -->
			<view class="goods-pic f-column p-lr-30">
				<view class="title">商品轮播图</view>
				<view class="pic-container">
					<view class="pic-container-pic-container add-picture" v-if="slider_image.length < 10">
						<image class="addpicture-icon" mode="aspectFill" src="../../static/icons/add.png" @click="addPic(3,9 - slider_image.length,'slider_image')"></image>
					</view>
					<view class="pic-container-pic-container" v-for="(item , index) in slider_image" :key="index" @click.stop="deletePic('slider_image', index)">
						<image class="delete-pic-icon" mode="aspectFill" src="../../static/icons/delete.png"></image>
						<image class="pic-container-pic" mode="aspectFill" :src="item"></image>
					</view>
					<view class="pic-container-pic-container" v-show="(slider_image.length%3) !== 0">
						
					</view>
				</view>
			</view>
			<!-- 单位 -->
			<view class="goods-unit f-row p-lr-30">
				<view class="title">单位</view>
				<input type="text" class="txt" placeholder="请输入单位" v-model="unit_name"></input>
			</view>
			<!-- 运费模板 -->
			<view class="freight-template f-row p-lr-30">
				<view class="title">运费模板</view>
				<view class="goods-shipping-select" :style="shippingValue ? 'color:#333333' : 'color:#999999'" @click.stop="shippingSelect">
					{{shippingValue.name || '请选择'}}
					<view :class="shippingClass"></view>
				</view>
			</view>
			<!-- 商品推荐 -->
			<view class="product-produce f-row p-lr-30">
				<view class="title">商品推荐</view>
				<view class="f-1 f-row" style="align-items: center;justify-content: flex-end;font-size: 24rpx;">
					<checkbox :value="product_produce" :checked="product_produce" @click="goodsProduceClick">店铺推荐</checkbox>
				</view>
			</view>
			<!-- 商品规格 -->
			<view class="goods-specifications f-column p-lr-30">
				<view class="f-row">
					<view class="title">商品规格</view>
					<view class="specifications-choose f-row f-1">
						<radio-group @change="specificationsChoose">
							<label>
								<radio value="0" :checked="specificationsValue == 0"/><text>单规格</text>
							</label>
							<label>
								<radio value="1" :checked="specificationsValue == 1"/><text>多规格</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="f-column m-tb-15" v-if="specificationsValue == 1">
					<view class="f-row">
						<view class="title">选择规格模板：</view>
						<view class="goods-specifications-select" :style="attrTemplateChooseList ? 'color:#333333' : 'color:#999999'" @click="specificationSelect()">
							{{attrTemplateChooseList ? attrTemplateChooseList.template_name : '请选择'}}
							<view :class="specificationClass"></view>
						</view>
					</view>
					<view class="f-column" v-if="attrTemplateValueList">
						<view class="f-column" v-for="(item, index) in attrTemplateValueList" :key="index">
							<view class="attr-title">{{item.value}}</view>
							<view class="f-row" style="flex-wrap: nowrap;">
								<view class="attr-name" v-for="(nitem, nindex) in item.detail" :key="nindex">
									{{nitem}}
									<image class="attr-delete" src="../../static/icons/delete.png" mode="aspectFill" @click="attrDelete(nindex, index)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 各规格商品参数（成本、市场价、价格、库存、商品编号、重量、体积） -->
			<view class="singleGood-setting-list f-column m-tb-30" v-if="singleGoodList && specificationsValue == 1">
				<!-- 批量添加 -->
				<view class="f-column p-lr-30">
					<view class="f-row">
						<view class="f-1" style="line-height: 70rpx;font-size: 26rpx;">批量添加</view>
						<view style="height: 60rpx;margin: 5rpx 15rpx;
								line-height: 60rpx;text-align: center;
								background-color: #007AFF;font-size: 24rpx;border-radius: 16rpx;
								padding: 0 15rpx;color: #fff;" @click.stop="settingAllAdd">添加</view>
					</view>
					<view class="singleGood-setting f-row">
						<view class="singGood-setting-item f-column center" v-for="(setting , sindex) in settingAllList" :key="sindex">
							<view class="setting-name">{{setting.name}}</view>
							<view class="setting-number">
								<input class="f-1" type="digit" maxlength="7" :value="setting.value" @input="settingAllListInput($event , setting)">
							</view>
						</view>
					</view>
				</view>
				<!-- 各规格信息设置 -->
				<view class="singleGood-item f-column p-lr-30" v-for="(item , index) in singleGoodList" :key="index" v-if="singleGoodList">
					<view class="singleGood-value f-row m-tb-15">
						<view class="singleGood-value-item" v-for="(value, vindex) in item.detail">
							{{value}}
						</view>
					</view>
					<view class="singleGood-setting f-row ">
						<view class="singGood-setting-item f-column center" v-for="(setting , sindex) in settingList" :key="sindex">
							<view class="setting-name">{{setting.name}}</view>
							<view class="setting-number">
								<input @input="singleSettignInput($event, item, setting.type)" class="f-1" type="digit" maxlength="7" :value="item[setting.type]">
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 单规格时商品信息设置 -->
			<view class="singleGood-setting-list f-column m-30" v-if="singleGoodList && specificationsValue == 0">
				<view class="singleGood-setting f-row ">
					<view class="singGood-setting-item f-column center" v-for="(setting , sindex) in settingList" :key="sindex">
						<view class="setting-name">{{setting.name}}</view>
						<view class="setting-number">
							<input @input="singleSettignInputExt($event, setting.type)" class="f-1" type="digit" maxlength="7" :value="singleGoodList[0][setting.type]">
						</view>
					</view>
				</view>
			</view>
			<!-- 提交 -->
			<view class="submit-button" @click="submitEdit">
				提交
			</view>
			<!-- 平台商品分类选择 -->
			<view class="selectarea-container" :style="categoryselecting ? 'bottom:0' : 'bottom: -100vh' " v-if="categoryList" @touchmove.stop.prevent>
				<view class="f-1" style="width: 100%;" @click.stop="cancelOperation"></view>
				<view class="selectarea">
					<scroll-view scroll-y="true" scroll-x="false" class="category-item">
						<view :class="categorychooseValue[0] == index ? 'category-child-item-ed' : 'category-child-item'" v-for="(item, index) in categoryList" :key="index" @click.stop="categoryListClick(index, 0)">
							{{item.label}}
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" scroll-x="false" class="category-item" v-if="categorychooseValue[0] !== -1">
						<view :class="categorychooseValue[1] == index ? 'category-child-item-ed' : 'category-child-item'" v-for="(item, index) in categoryList[categorychooseValue[0]].children" :key="index" @click.stop="categoryListClick(index, 1)">
							{{item.label}}
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" scroll-x="false" class="category-item" v-if="categorychooseValue[1] !== -1">
						<view class="category-child-item-last" :style="categorychooseValue[2] == index ? 'color:#007AFF' : ''" v-for="(item, index) in categoryList[categorychooseValue[0]].children[categorychooseValue[1]].children" :key="index" @click.stop="categoryListClick(index, 2)">
							{{item.label}}
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 商户商品分类选择 -->
			<view class="selectarea-container" :style="cSelectselecting ? 'bottom:0' : 'bottom: -100vh' " @touchmove.stop.prevent>
				<view class="f-1" @click="cancelOperation"></view>
				<view class="selectarea">
					<scroll-view scroll-y="true" scroll-x="false" class="category-item">
						<view class="categorySelect-child-item" v-for="(item, index) in categorySelect" :key="index" @click.stop="categoryselectClick(item)">
							{{item.label}}
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 品牌选择 -->
			<view class="selectarea-container" :style="brandSelecting ? 'bottom:0' : 'bottom: -100vh' " @touchmove.stop.prevent>
				<view class="f-1" @click="cancelOperation"></view>
				<view class="selectarea">
					<scroll-view scroll-y="true" scroll-x="false" class="category-item">
						<view class="categorySelect-child-item" v-for="(item, index) in categoryBrandlist" :key="index" @click.stop="brandListClick(item)">
							{{item.brand_name}}
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 运费模板选择 -->
			<view class="selectarea-container" :style="shippingSelecting ? 'bottom:0' : 'bottom: -100vh' " @touchmove.stop.prevent>
				<view class="f-1" @click="cancelOperation"></view>
				<view class="selectarea">
					<scroll-view scroll-y="true" scroll-x="false" class="category-item">
						<view class="categorySelect-child-item" v-for="(item, index) in shippinglist" :key="index" @click.stop="shippingListClick(item)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 规格模板选择 -->
			<view class="selectarea-container" :style="specificationSelecting ? 'bottom:0' : 'bottom: -100vh' " @touchmove.stop.prevent>
				<view class="f-1" @click="cancelOperation"></view>
				<view class="selectarea">
					<scroll-view scroll-y="true" scroll-x="false" class="category-item">
						<view class="categorySelect-child-item" v-for="(item, index) in attrTemplateList" :key="index" @click.stop="attrTemplateListClick(item)">
							{{item.template_name}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import STORE from '../../api/store.js'
	import { showToast } from '../../lib/utils.js'
	export default {
		data() {
			return {
				isReady: false,
				specificationSelecting: false,
				specificationClass: 'sanjiaoOri',
				categorySelectClass: 'sanjiaoOri',
				categoryListClass: 'sanjiaoOri',
				categoryselecting: false,
				cSelectselecting: false,
				brandClass: 'sanjiaoOri',
				brandSelecting: false,
				brandchooseValue: false,
				shippingSelecting: false,
				shippingValue: false,
				shippingClass: 'sanjiaoOri',
				categorychooseValue: [-1,-1,-1],
				cSelectchooseValue: [],
				cSelectchooseList: {},
				product_id: false,
				goodsdata: false,
				categorySelect: false,
				categoryList: false,
				categoryBrandlist: false,
				shippinglist: false,
				categoryBrandlist: false,
				attrTemplateList: false,
				cate_id: false,
				textareaValue: '',
				goodsnameValue: '',
				image:'',
				slider_image:[],
				unit_name:'',
				product_produce: 1,
				specificationsValue: 0,
				attrTemplateChooseList: false,
				attrTemplateValueList: [],
				singleGoodList: false,
				settingList: [
					{name: '售价' , type: 'price'},
					{name: '成本价' , type: 'cost'},
					{name: '原价' , type: 'ot_price'},
					{name: '库存' , type: 'stock'}
				],
				alladdlist: {},
				settingAllList: [
					{name: '售价' , type: 'price' , value:""},
					{name: '成本价' , type: 'cost' , value:""},
					{name: '原价' , type: 'ot_price' , value:""},
					{name: '库存' , type: 'stock' , value:""}
				],
				action: false,
			}
		},
		onLoad(option) {
			_this = this;
			if(option){
				if(option.id) {
					_this.product_id = option.id;
				} 
				_this.action = option.action
				if(option.action == 'create') uni.setNavigationBarTitle({
					title: '商品发布'
				})
			}else{
				showToast('请求错误');
				uni.navigateBack();
			}
			_this.requestData();
		},
		onShow() {
			const image = uni.getStorageSync('STORAGE_DATA');
			if(image) {
				if(typeof image == 'string')
				{ _this.image = image; }
				else
				{ _this.slider_image = image; }
			}
			uni.removeStorageSync('STORAGE_DATA');
		},
		methods: {
			requestData() {
				console.log(_this.action)
				if(_this.action == "update") {
					STORE.productDetail(_this.product_id).then((res) => {
						console.log(res);
						res.data.data['merCateId'].forEach((item) => {
							_this.cSelectchooseValue.push(item['mer_cate_id']);
							_this.cSelectchooseList[item['mer_cate_id']] = item['category'];
						});
						_this.goodsdata = res;
						_this.textareaValue = res.store_info;
						_this.goodsnameValue = res.store_name;
						_this.unit_name = res.unit_name;
						_this.brandchooseValue = res.brand;
						_this.image = res.image;
						_this.slider_image = res.slider_image;
						_this.shippingValue = res.temp;
						_this.specificationsValue = res.attr.length > 0 ? 1 : 0 ;
						_this.singleGoodList = res.attrValue;
						_this.attrTemplateValueList = res.attr;
						_this.cate_id = res.cate_id;
					}).catch((err) => {
						console.log(err);
					});
				}else if (_this.action == 'create') {
					_this.singleGoodList = [{
								"product_id": "",
								"detail": "",
								"stock": "",
								"sales": 0,
								"image": "",
								"bar_code": "",
								"cost": "",
								"ot_price": "",
								"price": "",
								"volume": "",
								"weight": "",
								"type": 0,
								"extension_one": "",
								"extension_two": "",
								"value0": ""
					}];
				}
				STORE.categorySelect().then((res) => {
					_this.categorySelect = res;
				}).catch((err) => {
					console.log(err);
				});
				STORE.categoryList().then((res) => {
					_this.categoryList = res;
				}).catch((err) => {
					console.log(err);
				});
				STORE.categoryBrandList().then((res) => {
					_this.categoryBrandlist = res;
					// console.log(_this.categoryBrandlist);
				}).catch((err) => {
					console.log(err);
				});
				STORE.shippingList().then((res) => {
					// console.log(res);
					_this.shippinglist = res;
				}).catch((err) => {
					console.log(err);
				});
				STORE.attrTemplateLst().then((res) => {
					_this.attrTemplateList = res.list;
					// console.log(res.data.data.list);
				}).catch((err) => {
					console.log(err);
				});
				_this.isReady = true;
			},
			categoryListselect() {
				if(_this.categoryselecting) {
					_this.categoryListClass = 'sanjiao2';
				}else{
					_this.cSelectselecting = false;
					_this.categorySelectClass = 'sanjiaoOri';
					_this.brandSelecting = false;
					_this.brandClass = 'sanjiaoOri';
					_this.shippingSelecting = false;
					_this.shippingClass = 'sanjiaoOri';
					_this.specificationSelecting = false;
					_this.specificationClass = 'sanjiaoOri';
					_this.categoryListClass = 'sanjiao';
				}
				_this.categoryselecting = _this.categoryselecting ? false : true;
			},
			// 商户分类子元素选择按钮
			categorySelectselect() {
				if(_this.cSelectselecting) {
					_this.categorySelectClass = 'sanjiao2';
				}else{
					_this.categoryselecting = false;
					_this.categoryListClass = 'sanjiaoOri';
					_this.brandSelecting = false;
					_this.brandClass = 'sanjiaoOri';
					_this.shippingSelecting = false;
					_this.shippingClass = 'sanjiaoOri';
					_this.specificationSelecting = false;
					_this.specificationClass = 'sanjiaoOri';
					_this.categorySelectClass = 'sanjiao';
				}
				_this.cSelectselecting = _this.cSelectselecting ? false : true;
			},
			// 平台子元素选择按钮
			categoryListClick(index, arrindex) {
				if(arrindex == 0){
					if(index == _this.categorychooseValue[arrindex]){return;}
					else{_this.categorychooseValue[1] = -1;_this.categorychooseValue[2] = -1;}
				}else if(arrindex == 1) {
					if(index == _this.categorychooseValue[arrindex]){return;}
					else{_this.categorychooseValue[2] = -1;}
				}else if(arrindex == 2){
					if(index == _this.categorychooseValue[arrindex]){_this.categoryselecting = false;return;}
					else{
						_this.categorychooseValue[arrindex] = index;
						_this.cate_id = _this.categoryList[_this.categorychooseValue[0]].children[_this.categorychooseValue[1]].children[_this.categorychooseValue[2]].value;
						_this.categoryselecting = false;
						return;
					}
				}
				_this.categorychooseValue[arrindex] = index;
				this.$forceUpdate();
			},
			// 商户分类选择按钮
			categoryselectClick(item) {
				let obj = {} , arr = JSON.parse(JSON.stringify(_this.cSelectchooseList));
				obj = { 'store_category_id' : item.value, 'cate_name' : item.label };
				if(!(_this.cSelectchooseValue.indexOf(item.value) == -1)) {
					_this.categorySelectClass = 'sanjiao2';
					_this.cSelectselecting = false ;
					return;
				}
				_this.cSelectchooseValue.push(item.value);
				arr[item.value] = obj;
				_this.cSelectchooseList = arr;
				_this.categorySelectClass = 'sanjiao2';
				_this.cSelectselecting = false ;
			},
			// 商户分类删除
			deleteCategorySelect(item) {
				let obj = JSON.parse(JSON.stringify(_this.cSelectchooseList));
				let index = _this.cSelectchooseValue.indexOf(item.store_category_id);
				uni.showModal({
					content: '确认删除分类吗？',
					confirmText: '确定',
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({
								title: '删除中'
							});
							if(index !== -1){
								delete obj[item.store_category_id];
								_this.cSelectchooseList = obj;
								_this.cSelectchooseValue.splice(index,1);
								uni.hideLoading();
							}else{
								_this.showToast('删除失败');
								uni.hideLoading();
							}
						}else{
							uni.hideLoading();
						}
					},
					fail: (err) => {
						_this.showToast('未知错误');
					}
				});
			},
			// 品牌选择弹窗子元素点击按钮方法
			brandListClick(item) {
				_this.brandchooseValue = item;
				_this.brandSelecting = false;
			},
			// 运费模板选择弹窗子元素点击按钮方法
			shippingListClick(item) {
				_this.shippingValue = item;
				_this.shippingSelecting = false;
			},
			// 品牌选择弹窗点击按钮方法
			brandSelect() {
				if(_this.brandSelecting) {
					_this.brandClass = 'sanjiao2';
				}else{
					_this.cSelectselecting = false;
					_this.categorySelectClass = 'sanjiaoOri';
					_this.categoryselecting = false;
					_this.categoryListClass = 'sanjiaoOri';
					_this.shippingSelecting = false;
					_this.shippingClass = 'sanjiaoOri';
					_this.specificationSelecting = false;
					_this.specificationClass = 'sanjiaoOri';
					_this.brandClass = 'sanjiao';
				}
				_this.brandSelecting = _this.brandSelecting ? false : true;
			},
			// 运费模板弹窗点击按钮方法
			shippingSelect() {
				if(_this.shippingSelecting) {
					_this.shippingClass = 'sanjiao2';
				}else{
					_this.cSelectselecting = false;
					_this.categorySelectClass = 'sanjiaoOri';
					_this.categoryselecting = false;
					_this.categoryListClass = 'sanjiaoOri';
					_this.brandSelecting = false;
					_this.brandClass = 'sanjiaoOri';
					_this.shippingClass = 'sanjiao';
				}
				_this.shippingSelecting = _this.shippingSelecting ? false : true;
			},
			// 规格模板弹窗点击按钮方法
			specificationSelect() {
				if(_this.specificationSelecting) {
					_this.specificationClass = 'sanjiao2';
				}else{
					_this.cSelectselecting = false;
					_this.categorySelectClass = 'sanjiaoOri';
					_this.categoryselecting = false;
					_this.categoryListClass = 'sanjiaoOri';
					_this.brandSelecting = false;
					_this.brandClass = 'sanjiaoOri';
					_this.shippingSelecting = false;
					_this.shippingClass = 'sanjiaoOri';
					_this.specificationClass = 'sanjiao';
				}
				_this.specificationSelecting = _this.specificationSelecting ? false : true;
			},
			// 规格模板选择
			attrTemplateListClick(item) {
				let obj = JSON.parse(JSON.stringify(item.template_value));
				_this.attrTemplateChooseList = JSON.parse(JSON.stringify(item));
				_this.attrTemplateValueList = obj;
				_this.specificationSelecting = false;
				_this.specificationClass = 'sanjiaoOri';
			 	_this.singleGoodList =  _this.initArr(_this.attrTemplateValueList);
			},
			// 规格删除
			attrDelete(index , pindex) {
				_this.attrTemplateValueList[pindex].detail.splice(index, 1);
				if(_this.attrTemplateValueList[pindex].detail.length == 0)_this.attrTemplateValueList.splice(pindex, 1);
				if(_this.attrTemplateValueList.length == 0){_this.attrTemplateChooseList = false;return;}
				_this.singleGoodList =  _this.initArr(_this.attrTemplateValueList);
				console.log(_this.singleGoodList);
			},
			// 删除图片 arr是字段名，index是图片的下标
			deletePic(arr,index) {
				uni.showModal({
					title: '确认删除该图片吗？',
					confirmText: '删除',
					success: (res) => {
						if(res.confirm) {
							if(arr == 'image') {
								_this.image = '';
							}else if(arr == 'slider_image') {
								_this.slider_image.splice(index, 1);
							}
						}else{
							return;
						}
					}
				});
			},
			// 取消操作动作（分类选择、模板选择）
			cancelOperation() {
				if(_this.categoryselecting || _this.cSelectselecting || _this.shippingSelecting || _this.brandSelecting || _this.specificationSelecting) {
					_this.categoryselecting = false;
					_this.categoryListClass = 'sanjiaoOri';
					_this.cSelectselecting = false;
					_this.categorySelectClass = 'sanjiaoOri';
					_this.shippingSelecting = false;
					_this.shippingClass = 'sanjiaoOri';
					_this.brandSelecting = false;
					_this.brandClass = 'sanjiaoOri'
					_this.specificationSelecting = false;
					_this.specificationClass = 'sanjiaoOri';
				}else{
					return;
				}
			},
			// 商品是否推荐
			goodsProduceClick() {
				_this.product_produce = _this.product_produce == 1 ? 0 : 1 ;
			},
			// 单规格、多规格选择
			specificationsChoose(e) {
				_this.specificationsValue = e.detail.value ;
				if(e.detail.value == 0) {
					_this.attrTemplateChooseList = false;
					_this.singleGoodList = [{
						"product_id": _this.product_id ? _this.product_id : "",
						"detail": "",
						"stock": "",
						"sales": 0,
						"image": _this.goodsdata.image ? _this.goodsdata.image : "",
						"bar_code": "",
						"cost": "",
						"ot_price": "",
						"price": "",
						"volume": "",
						"weight": "",
						"type": 0,
						"extension_one": "",
						"extension_two": "",
						"value0": ""
					}]
				}else{
					_this.singleGoodList = false;
				}
				console.log(_this.singleGoodList);
			},
			// 初始化规格数组
			initArr(arr) {
				let objArr = JSON.parse(JSON.stringify(arr)),
					resArr = [],
					obj = {},
					allArr = [],
					finalArr;
				for (let i = 0, len = arr.length; i < len; i++) {
					resArr = [];
					for (let j = 0, nlen = arr[i].detail.length; j < nlen; j++) {
						obj = {};
						obj[arr[i].value] = arr[i].detail[j];
						resArr.push(obj);
					}
					allArr[i] = resArr;
				};
				finalArr = _this.initValue(allArr);
				return finalArr;
				// allArr
				// [[{"颜色":"橙"},{"颜色":"黄"},{"颜色":"绿"},{"颜色":"红"}] , [{"内存大小":"4G"},{"内存大小":"6G"},{"内存大小":"8G"}] , [{"手机储存":"128G"},{"手机储存":"256G"}]]
			},
			// 规格数组组合
			initValue(arr) {
				let i = 0,
					preArr = [],
					newArr = [],
					obj = {};
				while (i < arr.length - 1) {
					newArr = [];
					if (i == 0) preArr = JSON.parse(JSON.stringify(arr[i]));
					for (let j = 0, len = preArr.length; j < len; j++) {
						for (let k = 0, klen = arr[i + 1].length; k < klen; k++) {
							obj = {};
							obj = Object.assign(preArr[j], arr[i + 1][k]);
							newArr.push(obj);
						}
					}
					preArr = JSON.parse(JSON.stringify(newArr));
					i++;
				}
				return _this.initattrValue(preArr);
			},
			// 生成提交数据对象
			initattrValue(arr) {
				let result = [], obj = {};
				for (let i = 0, len = arr.length; i < len; i++) {
					let objkey = Object.keys(arr[i]);
					obj = {};
					for(let j = 0; j < objkey.length ; j++) {
						obj['value' + j] = arr[i][objkey[j]];
					}
					obj.detail = arr[i];
					obj.brokerage = 0;
					obj.brokerage_two = 0;
					obj.cost = "";
					obj.image = "";
					obj.ot_price = "";
					obj.price = "";
					obj.stock = 0;
					obj.volume = 0;
					obj.weight = 0;
					obj.product_id = _this.product_id;
					result.push(obj);
				}
				return result;
			},
			// 批量添加按钮方法
			settingAllAdd() {
				for(let i = 0 ,len = _this.settingAllList.length; i < len; i++) {
					if(_this.settingAllList[i].value == "" || _this.settingAllList[i].value.trim() == "") {
						showToast(_this.settingAllList[i].name + '不能为空');
						return;
					}
				}
				_this.singleGoodList.forEach((item) => {
					item.price = _this.settingAllList[0].value;
					item.cost = _this.settingAllList[1].value;
					item.ot_price = _this.settingAllList[2].value;
					item.stock = _this.settingAllList[3].value;
				});
			},
			// 多规格商品信息设置的@input
			singleSettignInput(e, item , type) {
				item[type] = e.target.value;
			},
			// 单规格商品信息设置的@input
			singleSettignInputExt(e, type) {
				console.log(e, type)
				_this.singleGoodList[0][type] = e.target.value;
			},
			// 批量添加的@Input
			settingAllListInput(e, item) {
				item.value = e.target.value;
			},
			// 提交商品内容
			submitEdit() {
				let data = {
					attrValue: _this.singleGoodList,
					attr: _this.attrTemplateValueList,
					brand_id: _this.brandchooseValue.brand_id,
					image: _this.image,
					unit_name: _this.unit_name ,
					store_info: _this.textareaValue ,
					store_name: _this.goodsnameValue ,
					temp_id: _this.shippingValue.shipping_template_id ,
					slider_image : _this.slider_image,
					mer_cate_id: Object.keys(_this.cSelectchooseList),
					spec_type: _this.specificationsValue,
					content: _this.goodsdata.content || '',
					is_gift_bag: _this.goodsdata.is_gift_bag || 0,
					cate_id: _this.cate_id,
				}
				if(data.store_name == '' || data.store_name.trim() == '')
				{ showToast('请填写商品名称');return;	}
				else if(!data.cate_id)
				{ console.log(data.cate_id);showToast('请选择平台商品分类');return;	}
				else if(data.mer_cate_id.length == 0)
				{ showToast('请选择商户商品分类');return;	}
				else if(!data.brand_id)
				{ showToast('请选择品牌');return;	}
				else if(data.store_info == '' || data.store_info.trim() == '')
				{ showToast('请填写商品简介');return;	}
				else if(data.image == '')
				{ showToast('请添加主图');return;	}
				else if(!data.slider_image || data.slider_image.length == 0)
				{ showToast('请添加轮播图');return;	}
				else if(data.unit_name == '' || data.unit_name.trim() == '')
				{ showToast('请填写单位');return;	}
				else if(!data.temp_id)
				{ showToast('请选择运费模板');return;	}
				else if((data.spec_type == 0 && (data.attrValue.length !== 1 || data.attr.length !== 0)) ||
					(data.spec_type == 1 && (data.attrValue.length == 0 || data.attr.length == 0)))
				 {	
					showToast('规格参数错误');
					return;	}



				uni.showModal({
					title: '确认提交？',
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({
								title:'提交中'
							});
							if(_this.action == 'update') {
								STORE.productUpdate({
									data,
									id: _this.product_id
								}).then((res) => {
									console.log(res);
									uni.hideLoading();
									showToast(res.message);
									setTimeout(() => {
										uni.navigateBack();
									},250);
								}).catch((err) => {
									console.log(err);
									uni.hideLoading();
									showToast(err.message);
								});
							} else if(_this.action == 'create') {
								STORE.productCreate(data).then((res) => {
									console.log(res);
									uni.hideLoading();
									showToast(res.message);
									setTimeout(() => {
										uni.navigateBack();
									},250);
								}).catch((err) => {
									console.log(err);
									uni.hideLoading();
									showToast(err.message);
									setTimeout(() => {
										uni.navigateBack();
									},250);
								})
							}
						}
					}
				});
			},
			// 选取 商品封面图、商品轮播图
			addPic(status , number , picType) {
				uni.navigateTo({
					url: '../pic-manage/pic-manage?status='+ status + '&number=' + number + '&picType=' + picType
					// pictype : main_image slider_image
				});
			}
		}
	}
</script>

<style>
	.title{
		height: 100rpx;
		line-height: 100rpx;
		min-width: 200rpx;
		font-size: 24rpx;
	}
	.txt{
		height: 100rpx;
		line-height: 100rpx;
		flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		text-align: right;
		font-size: 22rpx;
		padding-right: 15rpx;
	}
	.textarea{
		border: 2rpx solid #e8e8e8;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		padding: 15rpx;
	}
	.textarea textarea{
		height: 150rpx;
		font-size: 24rpx;
	}
	.goods-name{
		border-top: 2rpx solid #e8e8e8;
	}
	.goods-name ,
	.platform-goods-category ,
	.mer-goods-category ,
	.goods-brand ,
	.goods-produce ,
	.goods-mainpic ,
	.goods-pic ,
	.goods-unit{
		border-bottom: 2rpx solid #e8e8e8;
		position: relative;
	}
	.sanjiaoOri{
		height: 10rpx;
		width: 10rpx;
		border-top: 5rpx solid #d8d8d8;
		border-left: 5rpx solid #d8d8d8;
		transform: rotate(-135deg);
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		margin-top: -7rpx;
	}
	.sanjiao{
		height: 10rpx;
		width: 10rpx;
		border-top: 5rpx solid #d8d8d8;
		border-left: 5rpx solid #d8d8d8;
		transform: rotate(-135deg);
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		margin-top: -7rpx;
		animation: rotateToTop .25s linear 1;
		animation-fill-mode: forwards;
	}
	.sanjiao2{
		height: 10rpx;
		width: 10rpx;
		border-top: 5rpx solid #d8d8d8;
		border-left: 5rpx solid #d8d8d8;
		transform: rotate(45deg);
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		margin-top: -7rpx;
		animation: rotateToBottom .25s linear 1;
		animation-fill-mode: forwards;
	}
	@keyframes rotateToTop{
		from{
			transform: rotate(-135deg);
		}
		to{
			transform: rotate(45deg);
		}
	}
	@keyframes rotateToBottom{
		from{
			transform: rotate(45deg);
		}
		to{
			transform: rotate(-135deg);
		}
	}
	.selectarea-container{
		position: fixed;
		left: 0;
		right: 0;
		height: 100vh;
		z-index: 999;
		display: flex;
		flex-direction: column;
		transition:all .3s;
		 -moz-transition:all .3s; /* Firefox 4 */
		-webkit-transition:all .3s; /* Safari and Chrome */
		-o-transition:all .3s; /* Opera */
	}
	.selectarea{
		width: 100vw;
		height: 25vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		z-index: 102;
		padding-top: 15rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-sizing: border-box;
		border-top: 2rpx solid #d8d8d8;
	}
	.category-item{
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 25vh;
	}
	.category-child-item ,.category-child-item-ed ,.category-child-item-last,.categorySelect-child-item{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 22rpx;
		text-align: center;
		position: relative;
	}
	.category-child-item::after , .category-child-item-ed::after{
		content: "";
		height: 8rpx;
		width: 8rpx;
		position: absolute;
		top: 35rpx;
		right: 15rpx;
		margin-top: -4rpx;
		transform: rotate(135deg);
	}
	.category-child-item,.category-child-item-last,.categorySelect-child-item{
		color: #999999;
	}
	.category-child-item-ed{
		color: #007AFF;
	}
	.category-child-item::after{
		border-top: 2rpx solid #999999;
		border-left: 2rpx solid #999999;
	}
	.category-child-item-ed::after{
		border-top: 2rpx solid #007AFF;
		border-left: 2rpx solid #007AFF;
	}
	.category-select{
		width: 100%;
		position: relative;
		align-items: center;
		padding-right: 60rpx;
		overflow-x: unset;
		overflow-y: unset;
		white-space: nowrap;
	}
	.category-select-item{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 0 45rpx 0 15rpx;
		background-color: #d8d8d8;
		margin: 15rpx 5rpx;
		border-radius: 16rpx;
		position: relative;
	}
	.delete-icon{
		position: absolute;
		height: 30rpx;
		width: 30rpx;
		right: 10rpx;
		top: 35rpx;
		margin-top: -15rpx;
	}
	.goods-brand-select,.goods-shipping-select,.goods-specifications-select{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 24rpx;
		position: relative;
		flex: 1;
		text-align: right;
		padding-right: 75rpx;
	}
	.pic-container{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;
	}
	.pic-container-pic-container{
		height: 27vw;
		width: 27vw;
		border-radius: 16rpx;
		position: relative;
		margin-bottom: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.pic-container-pic{
		height: 27vw;
		width: 27vw;
		vertical-align: top;
	}
	.delete-pic-icon{
		position: absolute;
		height: 30rpx;
		width: 30rpx;
		right: 10rpx;
		top: 20rpx;
		margin-top: -15rpx;
		z-index: 99;
	}
	.addpicture-icon{
		width: 10vw;
		height: 10vw;
	}
	.add-picture{
		box-sizing: border-box;
		border: 2rpx dashed #999999;
	}
	.specifications-choose{
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
	}
	.specifications-choose label text{
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 10rpx;
	}
	.attr-title{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
	}
	.attr-name{
		border-radius: 16rpx;
		color: #333333;
		font-size: 22rpx;
		margin-right: 15rpx;
		position: relative;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 45rpx 0 15rpx;
		text-align: center;
		border: 2rpx solid #d8d8d8;
	}
	.attr-delete{
		height: 30rpx;
		width: 30rpx;
		position: absolute;
		top: 30rpx;
		margin-top: -15rpx;
		right: 10rpx;
	}
	.singleGood-setting{
		border: 2rpx solid #d8d8d8;
		border-radius: 16rpx;
	}
	.setting-name{
		font-size: 24rpx;
		border-bottom: 2rpx solid #d8d8d8;
		padding: 10rpx 0;
	}
	.singleGood-value-item{
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		border: 2rpx solid #D8D8D8;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
	.setting-number {
		height: 80rpx;
	}
	.setting-number input{
		margin: 10rpx 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		border: 2rpx solid #d8d8d8;
		border-radius: 10rpx;
	}
	.setting-pic {
		height: 60rpx;
		width: 60rpx;
		margin: 10rpx;
	}
	.setting-pic image{
		height: 60rpx;
		width: 60rpx;
	}
</style>
